<template>
  <div id="params">
    <!--搜索-->
    <div class="search-content">
      <div>
        <el-input v-model="userName" placeholder="请输入变量名查询" prefix-icon="el-icon-search" clearable @change="inquiryList" />
        <el-input v-model="userValue" placeholder="请输入变量值查询" prefix-icon="el-icon-search" clearable @change="inquiryList" />
        <el-input v-model="remarks" placeholder="请输入参数说明查询" prefix-icon="el-icon-search" clearable @change="inquiryList" />
        <el-button type="primary" icon="el-icon-search" @click="inquiryList">查询</el-button>
      </div>
      <div class="search-apply">
        <el-button type="danger" icon="el-icon-delete" id="clear-cache" @click="clearCache">清理缓存</el-button>
        <el-button type="warning" icon="el-icon-edit" @click="systemAdd">新增</el-button>
      </div>
    </div>
    <!--操作列表-->
    <div class="table">
      <el-table fit :data="tableData" style="width: 100%">
        <el-table-column label="ID" prop="id"  align="center"  />
        <el-table-column label="变量名" prop="name" align="center"  width="180">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="scope.row.name"  v-if="isNotNull(scope.row.name)&&scope.row.name.length>20" placement="bottom">
              <span>{{ scope.row.name.substring(0,19)+"..."}}</span>
            </el-tooltip>
            <span v-else>{{ scope.row.name}}</span>
          </template>
        </el-table-column>
        <el-table-column label="变量值" prop="value" align="center"  width="180">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="scope.row.value"  v-if="isNotNull(scope.row.value)&&scope.row.value.length>20" placement="bottom">
              <span>{{ scope.row.value.substring(0,19)+"..."}}</span>
            </el-tooltip>
            <span v-else>{{ scope.row.value}}</span>
          </template>
        </el-table-column>
        <el-table-column label="参数说明" prop="remarks" align="center"  width="300">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" :content="scope.row.remarks"  v-if="isNotNull(scope.row.remarks)&&scope.row.remarks.length>20" placement="bottom">
              <span>{{ scope.row.remarks.substring(0,19)+"..."}}</span>
            </el-tooltip>
            <span v-else>{{ scope.row.remarks}}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="createDate" width="170"  align="center" />
        <el-table-column label="修改时间" prop="modifyDate" width="170"  align="center" />
        <el-table-column label="操作"  width="200" align="center">
          <template slot-scope="scope">
            <el-button size="mini" type="warning" @click="dealwithEdit(scope.$index, scope.row)">修改</el-button>
            <el-button size="mini" type="danger" @click="dealwithDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页-->
      <div class="pagination">
        <el-pagination
          :current-page.sync="currentPage"
          :page-sizes="[10,20,30,40,50]"
          layout="total,sizes, prev, pager, next"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <!--新增蒙层-->
    <el-dialog id="add-dialog" title="系统新增" :visible.sync="addDialogVisible">
      <el-form label-position="right" label-width="30%"  :model="add"  :rules="addRules" ref="addRuleForm">
        <el-form-item label="变量名：" prop="name">
          <el-input v-model="add.name" placeholder="请输入变量名" clearable />
        </el-form-item>
        <el-form-item label="变量值：" prop="value">
          <el-input v-model="add.value" type="textarea" :rows="3" placeholder="请输入变量值" clearable />
        </el-form-item>
        <el-form-item label="字段说明：" prop="remarks">
          <el-input v-model="add.remarks" type="textarea" :rows="3"  placeholder="请输入字段说明" clearable />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button id="add-btn" type="primary" @click="addSubmit('addRuleForm')">提交</el-button>
      </span>
    </el-dialog>
    <!--修改-->
    <el-dialog id="edit-dialog" title="系统修改" :visible.sync="editDialogVisible">
      <el-form label-position="right" label-width="30%"  :model="edit"  :rules="editRules" ref="editRuleForm">
        <el-form-item label="变量名：" prop="name">
          <el-input v-model="edit.name" placeholder="请输入变量名" clearable />
        </el-form-item>
        <el-form-item label="变量值：" prop="value">
          <el-input v-model="edit.value" type="textarea" :rows="2" placeholder="请输入变量值" clearable />
        </el-form-item>
        <el-form-item label="字段说明：" prop="remarks">
          <el-input v-model="edit.remarks" type="textarea" :rows="2" placeholder="请输入字段说明" clearable />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button id="edit-btn" type="primary" @click="editSubmit('editRuleForm')">提交</el-button>
      </span>
    </el-dialog>
    <!--删除-->
    <el-dialog :visible.sync="delDialogVisible" width="300px" center class="del-dialog" top="20%">
      <span class="del-tips">您确定要删除吗？</span>
      <span slot="footer" class="dialog-footer">
          <el-button @click="delDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="delKeys">确 定</el-button>
        </span>
    </el-dialog>
    <!--清理缓存-->
    <el-dialog :visible.sync="cacheModal" width="300px" center class="del-dialog" top="20%">
      <span class="del-tips">您确定要清理缓存吗？</span>
      <span slot="footer" class="dialog-footer">
          <el-button @click="cacheModal = false">取 消</el-button>
          <el-button type="primary" @click="clearCacheOk">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
  import {Message} from 'element-ui';
  import request from "../../utils/request";
    export default {
      name: "systemSetting",
      data(){
        var checkPublic = (rule, value, callback) => {
          if (!value) {
            return callback(new Error('内容不能为空'));
          }else {
            callback();
          }
        };
        return{
          // 查询
          userName:null,
          userValue:null,
          remarks:'',
          isClearable:true,
          // 列表数据
          tableData:[],
          //新增
          addDialogVisible:false,
          add:{
            name:"",
            value:"",
            remarks:""
          },
          addRules:{
            name:[{validator: checkPublic, trigger: 'blur' }],
            value:[{validator: checkPublic, trigger: 'blur' }],
            remarks:[{validator: checkPublic, trigger: 'blur' }]
          },
          //修改
          editDialogVisible:false,
          edit:{
            is:"",
            name:"",
            value:"",
            remarks:""
          },
          editRules:{
            name:[{validator: checkPublic, trigger: 'blur' }],
            value:[{validator: checkPublic, trigger: 'blur' }],
            remarks:[{validator: checkPublic, trigger: 'blur' }]
          },
          // 删除
          delId:null,
          delDialogVisible:false,
          //分页
          currentPage: 1,
          pageSize:10,
          total: 0,
          cacheModal:false
        }
      },
      mounted() {
        this.inquiryList();
      },
      methods:{
        clearCacheOk(){
          let that=this;
          request({
            method: 'get',
            url: 'admin/settings/clear',
          }).then(function (res) {
            if(res.code===200){
              Message.success("缓存清理成功");
              that.cacheModal=false;
            }
          }).catch(function (error) {
            console.log(error);
          });
        },
        //清理缓存
        clearCache(){
          this.cacheModal=true;
        },
        isNotNull(value){
          return value !== null && value !== undefined && value !== "";
        },
        //查询列表
        inquiryList(){
          let that=this;
          that.tableData=[];
          let data={
              pageNumber:that.currentPage,
              pageSize:that.pageSize,
              filters:[]
          };
          if(this.isNotNull(that.userName)){
            data.filters.push({
              property:"name",
              value:that.userName,
              operator: "like"
            })
          }
          if(this.isNotNull(that.userValue)){
            data.filters.push({
              property:"value",
              value:that.userValue,
              operator: "like"
            })
          }
          if(this.isNotNull(that.remarks)){
            data.filters.push({
              property:"remarks",
              value:that.remarks,
              operator: "like"
            })
          }
          request({
            method: 'post',
            url: 'admin/settings/list',
            headers:{
              'Content-Type': 'application/json;charset=UTF-8'
            },
            data:data
          }).then(function (res) {
            if(res.code===200){
              that.total=res.data.total;
              let arr=res.data.records;
              if(arr.length===0){
                that.tableData=[];
              }else{
                that.tableData=arr
              }
            }
          }).catch(function (error) {
            console.log(error);
          });
        },
        //新增
        systemAdd(){
          this.addDialogVisible=true;
        },
        addSubmit(formName){
          this.$refs[formName].validate((valid) => {
            if (valid) {
              let that=this;
              request({
                method: 'post',
                url: 'admin/settings/save',
                data:that.add
              }).then(function (res) {
                if(res.code===200){
                  that.addDialogVisible = false;
                  Message.success("新增成功");
                  that.add={};
                  that.inquiryList();
                }
              }).catch(function (error) {
                console.log(error);
              });
            } else {
              return false;
            }
          });
        },
        //修改
        dealwithEdit(index, row){
          this.editDialogVisible=true;
          this.edit={
            id:row.id,
            name:row.name,
            value:row.value,
            remarks:row.remarks
          }
        },
        editSubmit(formName){
          this.$refs[formName].validate((valid) => {
            if (valid) {
              let that=this;
              request({
                method: 'post',
                url: 'admin/settings/update',
                data:that.edit
              }).then(function (res) {
                if(res.code===200){
                  that.editDialogVisible = false;
                  Message.success("修改成功");
                  that.inquiryList();
                }
              }).catch(function (error) {
                console.log(error);
              });
            } else {
              return false;
            }
          });
        },
        //删除
        dealwithDelete(index, row){
          this.delDialogVisible=true;
          this.delId=row.id;
        },
        delKeys(){
          let that=this;
          that.delDialogVisible=false;
          request({
            method: 'post',
            url: 'admin/settings/delete/'+that.delId,
          }).then(function (res) {
            if(res.code===200){
              Message.success("删除成功");
              that.delId=null;
              that.inquiryList();
            }
          }).catch(function (error) {
            console.log(error);
          });
        },
        // 改变每页显示的数量
        handleSizeChange(val) {
          this.pageSize=val;
          this.inquiryList();
        },
        //改变当前页
        handleCurrentChange(val) {
          this.currentPage=val;
          this.inquiryList();
        }
      }
    }
</script>

<style src="../../assets/css/systemManagement/systemSetting.css">

</style>
